<template>
  <div class="condition">
    <p class="title">
      <slot name="title">&nbsp;</slot><i class="el-icon-circle-plus el-icon--right" :class="addDisabled ? 'disabled': ''" @click.stop="add"></i>
    </p>
    <li v-for="(item, index) in data" class="condition-item" :key="index">
      <slot  :item="item" name="item">
      </slot>
      <i class="el-icon-remove el-icon--right" @click.stop="remove(index)"></i>
    </li>
  </div>
</template>

<script>
  export default {
    name: 'trigger-condition',
    data () {
      return {
      }
    },
    props: {
      data: {type: Array, default: function () { return {} }},
      add: {type: Function, default: function () {}},
      remove: {type: Function, default: function () {}},
      addDisabled: {type: Boolean, default: false}
    },
    computed: {
    },
    watch: {
    },
    components: {
    },
    methods: {
      // add () {
      // },
      // remove (index) {
      // }
    },
    beforeMount () {
    }
  }
</script>

<style scoped lang='stylus'>
  @import '../../../../../assets/common.styl'
  .condition
    border 1px solid $c-border1
    margin 10px 0 20px
  .title
    background-color #F4F5F9
    font-size 12px
    color $cf-gray1
    padding 0 18px
    line-height 34px
    .el-icon-circle-plus
      cursor pointer
      float right
      font-size 16px
      color: $c-main
      padding-top 9px
    .disabled
      color #c8c9cc
      &:hover 
        cursor not-allowed 
  .condition-item
    padding 0 18px
    .el-icon-remove
      cursor pointer
      float right
      font-size 16px
      color: $c-pink
      padding-top 9px
    .item-select
      width 180px
      padding-right:15px
</style>


